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* web video player team 
° ABR, QoE, startup time 
° talk about АВК on Video Tech 2021 
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1. Theory 3. Harsh reality 


° How do we lose traffic? ° Buffer limit to X seconds 


On what video player aspects can we influence? * Dynamic buffer 
* QoE vs reducing data wastage ° Skippable fragments 
° How do we connect traffic with product metrics? ° Viewport capping 


e Aesthete capping 


2. The evolution of the reducing traffic ° SwitchUp capping 
KPI-metric 4. Results and conclusions 


What problem are we 
solving? 


Decrease costs on the 
traffic delivery 


This talk is about the 
reducing the traffic wastage 
from a client 


Theory. How to 
reduce the data 
wastage from client? 


How do we lose trate? 
money 


Theory 


Main data wastage scenarios 


° Wrong capping 


° Loss of the data we ve already downloaded 


Wrong sapping cupping 


сар\ Кар \ 
(verb) 
: to prevent from growing or 


spreading : set an upper limit on 
// cap oil prices 
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Capping 


1080p 


Video resolution 
n,n—————=m—— 4 


Container 


360px 


container orientation 


Capping 


video 
orientation 


Capping - limiting the qualities 
array according to the container 
dimensions 
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Theory 


Loss of the data we ve already 
downloaded 


e Early departure 
° Video skip (seeking) 


* Quality switch by user 
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Theory 


Loss of the data we ve already 
downloaded 
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° Video skip (seeking) 
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Theory 


Loss of the data we ve already 
downloaded 


e Early departure 
° Video skip (seeking) 


° Quality switch by user 


ABR - adaptive bitrate 


What video player aspects 
can we influence? 


° Buffer size : Decrease the buffer size 


* Video quality - Decrease the video quality 
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QoE vs 


reducing the 
traffic wastage 


Quality of experience 


is a measure of the delight or 
annoyance of а customer's 
experiences with а service 


(Wikipedia) 


Fast start 


Preventing a playback 
rebuffering 


Video quality 
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Reducing the 


traffic wastage 


The evolution of the 
reducing the traffic 
KPI-metric 


The evolution of the reducing the traffic KPl-metric 


Traffic volume, Tb 


Data wastage share, % 
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Traffic 


کک 


Which was watched by user 


Useless 


Which wasn’t watched һу 
user 
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Data wastage share 


Data wastage share 


No 


Downloaded 30 seconds 
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Data wastage share 


User watched 15 seconds 
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Downloaded 30 seconds 


Data wastage share 


1080p 1080p 


Share of а viewed 
content їп seconds 


= Share useful traffic 


The evolution of the reducing the traffic 
KPI-metric 


Traffic volume, Tb 


Data wastage share, % 
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Traffic / TVT, Mbit/sec TVT (Total View Time) 


Traffic / ТМТ 


ze Takes into account the growth of the service 


^P Doesn't take into account hype 4k titles 


-P Non-obvious metric 
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Our hypotheses 


Decrease the buffer size 
Buffer limit to X seconds 
Dynamic buffer 


Skippable fragments 


Decrease the video quality 
Viewport capping 
Aesthete capping 


SwitchUp capping 


Apps where we had experiments 


Kinopoisk 


Buffer limit to X 
seconds 


Buffer limit to X seconds: web 


30 second limit 


Chrome Chromecast* Firefox Safari 
Video 150MB 30MB 100MB 290MB 
Audio 12MB 2MB 15MB 14MB 


https://clck.ru/32qZqy 


Buffer limit to X seconds: android 


Kinopoisk: 


50 sec Wi-Fi 


Mobile networks 


Buffer limit to X seconds 


Android Web 


Zen - 15% Ib 


-1.5% & -6% 


traffic/TVT‏ سف 


: results 


buffer 


ynamic 


Buffer manager 


Set of buffer size rules: f(t), e(t), ... 


bufferSize = min(30 f(t), e(t), . . . ) 


Theory 


Dynamic buffer 


Calculate the buffer size from: 


* [he watched time since start 


* [he watched time since the last seek position 


Buffer manager 


JC) - calculates the buffer size depending on the watched time, 
where 4, - the watched time in seconds 


g(t.) - calculates the buffer size depending on the last seek position, 
where f, = currentPosition — lastSeekPosition 


bufferSize = min(30 f(t), g(t.)) 


Dynamic buffer relative to the watched time: web 


Time watched since the start of the video 


0 15 sec 


Buffer size = 15 sec Buffer size = 30 sec 


Dynamic buffer relative to the watched time: android 


Time watched since the start of the video 


0 200 ms 355 


Buffer size = 55 Buffer size = 10 s Buffer size = 255 


Dynamic buffer relative to the watched time: results 


Android Web 
Zen -21% Ib -5% Tb 


Kinopoisk 


Dynamic buffer relative to the last seek position: web 


Time watched since the last seek position 


0 155 


Buffer size = 15 $ Buffer size = 30s 
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rewind position 


Skippable fragments 


Heat map (most replayed) 
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MAMIFİ 


1 ce3oH, 3 серия. 
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Смотреть 3acTaBKy Пропустить 


Bl Сезоны и серии FES Аудио и субтитры 


Buffer size inside skippable fragments 


TV series title 


buffer size = 45 buffer size = min(30, fragment.start - currentPosition) buffer size = 4 s 
intro credits 
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okippable fragments: results 


Android Web 
Zen 


Kinopoisk - - 1% traffic/TVT 
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Viewport capp 


container orientation 


Capping 


video 
orientation 


Capping - limiting the qualities 
array according to the container 
dimensions 
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Capping in hls.js 
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© his.js demo q x > 


& his-js.netlify.app/demo?src=https%3A%2F%2Ftest-streams.mux.dev%2Fx36xhzz%2Fx36xhzz.m3u8&demoConfig=eyJIbmFibGVTdHJIYW1pbmciOnRydWUsimF1dG9SZWNvdmVyRXJyb3liOnRydWUsinNOb3BPbINOYWXxslj... 


AUTO-recover теаіа-еггог5: 
Stop on first stall: 
Dump transmuxed fMP4 data: 


Metrics history (max limit, -1 is unlimited): 
HTML video element width: 


Current player size: 
Current video resolution: 


Permalink: https://hls-js.netlify.app/demo?src=https%3A%2F%2Ftest- 


1pdE1ldHJpY3Mi0i0xfg== 


Е | 


| Responsive (80%) ~ 


1228.8 x 691.2 
1280 x 720 


streams.mux.dev$2Fx36xhzz$2Fx36xhzz.m3u8&demoConfig-eyJlbmFibGVTdHJlYWlpbmciOnRydWUsImFldG9SZWNvd 


mVyRXJyb3IiOnRydWUSsInNOb3BPblNOYWxsIjpmYWxzZSwiZHVtcGZNUDOQiOmZhbHNlLCJsZXZlbENhcHBpbmciOiOxLCJsaW 


a å я 


Apply 
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© his.js demo 


& his-js.netlify.app/demo?src=https%3A%2F%2Ftest-streams.mux.dev%2Fx36xhzz%2Fx36xhzz.m3u8&demoConfig=eyJIbmFibGVTdHJIYWI1pbmciOnRydWUsimF1dG9SZWNvdmVyRXJyb3liOnRydWUsInNOb3BPbINOYWXxslj... 
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his.js 


demo v1.2.4 
API docs | usage guide 


Test your HLS streams in all supported browsers (Chrome/Firefox/lE11/Edge/Safari). 
Advanced controls are available at the bottom of this page. 
Looking for a more basic usage example? Go here. 


Gi 
Big Buck Bunny - adaptive gualities v "debug": true, 


| "enableWorker": true, 
"lowLatencyMode": true, 


—— ere backBufferLength": 90 N 


| https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 


Auto-recover media-errors: 
Stop on first stall: м 
Dump transmuxed fMP4 data: ‘a 


Metrics history (max limit, -1 is unlimited): | -1 | 
HTML video element width: Responsive (80%) Y 

Current player size: 1228.8 x 691.2 
Current video resolution: 1920 x 1080 


Permalink: https: //hls-js.netlify.app/demo?src=httpst3A%2Ft2Ftest- 
streams.mux.devs$2Fx36xhzz$2Fx36xhzz.m3u8&demoConfig=eyJlbmFibGVTdHJ1YWIpbmciOnRydWUsImFldG9SZWNvd 


mVyRXJyb3IiOnRydWUsInNOb3BPblNOYWxsIjpmYWxzZSwiZHVtcGZNUDOQiOmZzhbHNlLCJsZXZlbENhcHBpbmciOiOxLCJsaW 3 — 
Ыр Persist | | 
lpdE11dHJpY3Mi0i0xfQ== 
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netlify 


Capping їп dash.js 


limitBitrateByPortal: true 


usePixelRatioInLimitBitrateByPortal: true 


httos://clck.ru/32qZtB 


Capping in dash.js 


<script> 


(function () í 


player.updateSettings (í 


streaming: { 


buffer: { 


bufferTimeAtTopQualityLongForm: 


«/script» 
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© © © @ scratch 1.html 4 X + v 


2 لا = * w o‏ فا File | /Users/bettapo/Library/Application%20Support/JetBrains/WebStorm2021.3/scratches/scratch_1.html‏ © ت0 
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Capping in dash.js 


<script> 
(function() { 


player.updateSettings (í 
streaming: { 
abr: 1 
limitBitrateByPortal: true 
۱ 
buffer: 1 
bufferTimeAtTopQualityLongForm: 20 


J) 07 
</script> 


© © © @ scratch_1.html «х + ۷ 


p © File | /Users/bettapo/Library/Application%20Support/JetBrains/WebStorm2021.3/scratches/scratch_1.html ( х з * = П 2 
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Viewport capping: results 


Android Web 
Zen 


Kinopoisk - 5% traffic/TVT - 


Aesthete capping 


Steven Robertson - Machine Learning for 


ABR їп production 


Steven Robertson - Machine Learning for ABR in production 
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https://youtu.be/iuaWhmETcRE 
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SwitchUp - metric of the frequency of the 
quality switching up by users 


Users 


4 q/ 
må | м ым 4 ым 


— C 
OTTO 


NN 


aesthetes 


normal users 


Users 


no limits no more than 480p (720p) 


Aesthete: results 


Android Web 
Zen - - 7-10% Tb 


Kinopoisk -40% traffic/TVT - 


SwitchUp capping 


104755 


Большой куш 
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SwitchUp: results 


Android Web 


Kinopoisk - - 4.5% traffic/TV T 


Conclusions 


Kinopoisk saves the following % of traffic: 
- 4.5% on web 


- 39% on android 


Conclusions on hypotheses 


e Buffer limit to X seconds 
° Dynamic buffer 

° Skippable fragments 

* Viewport capping 

e Aesthete capping 

e SwitchUp capping 


Feel free to contact me 
at any time 
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Leave your feedback! 
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